<!--weather-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    body{margin: 0px auto;padding: 0px;background-color: aquamarine;}
ul{margin: 5px auto;padding: 5px 5px 5px 0px;}
ul li{list-style-type: none;
display:inline-block;
}
a{text-decoration: none;}
a:hover{text-decoration: underline;color: red;}
img{height: 50px;width: 5opx;}
.btn_anniu{
    width: 100%;
    padding: 2px 0;
    font-size: 15px;
    border: 1px  #fff;
    color: #000;
    outline:none;
    background: #fff;
    
  }
  .newStyle{
    border-bottom: 2px  #f0892e;
    color: #f0892e;
    font-size: 15px;
    font-weight: bold;
  }
  #foot1{
  
  border: 1px solid aquamarine;
  float: left;
  width: 30%;
  margin: 0 auto;
  }
  .list li{
  border-right:2px blueviolet solid;
  color: royalblue;
 background: darkgray;
  }
    .list1 li{
    border-right: 2px white solid; 
  color: coral;
    background-color:skyblue;
    }
    blockquote{color: slateblue;}
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div0">
    <div id="header">
    <div id="div1"> 
        <table>
            <tr >
                <td ><h2>天气</h2></td>
                <td align="left"> <img src="./b551b7.png"></td>
            </tr>
        </table>
    </div>
   <div>
    <input type="text" v-model="city" @keyup.enter="searchWeather"
    class="input_txt"  placeholder="请输入城市">
    <input type="submit" value="搜索"@click="searchWeather();"><br>
    <ul>
        <li>部分城市:</li>
        <li><a href="#" @click="changeCity('北京')">北京</a></li>
        <li><a href="#" @click="changeCity('杭州')" >杭州</a></li>
        <li><a href="#"  @click="changeCity('福州')">福州</a></li>
        <li><a href="#"  @click="changeCity('兴义')">兴义</a></li>
    </ul>
   </div>
   <ul class="list">
    <li v-for="item in weatherList">
        <div class="info_type"><span>{{item.type}}</span></div>
       <div class="info_temp"><b>{{item.high}}</b></div>
       <div class="info_temp"> <b>{{item.low}}</b> </div>
       <div class="info_date"><span>{{item.date}}</span></div>
    </li>
</ul>
    
</div>
<div class="ph">
    <div id="header">
     <table style="color: turquoise;font-weight: bolder;">
         <tr>
             <td> <button class="btn_anniu" @click="change(0)":class="{ newStyle:0===number}" style="background-color: turquoise;"><b>实时天气</b></button></td>
             <td>
                <button class="btn_anniu" @click="change(1)" :class="{ newStyle:1===number}"  style="background-color: turquoise;"><b>近日天气</b></button></td>
         </tr>
     </table>
   </div>
   <div id="header">
    <div v-show="0===number"><p>
        <ul class="list1">
            <li v-for="item in hour">
                <div class="info_type"><span>{{item.day}}</span></div>
               <div class="info_temp"><b>{{item.tem}}</b></div>
               <div class="info_temp"> <b>{{item.wea}}</b> </div>
               <div class="info_date"><span>{{item.win}}</span></div>
            </li>
        </ul>
    </p>
    </div>
    <div v-show="1===number" >
        <ul class="list1">
            <li v-for="item in weatherList1">
                <div class="info_type"><span>{{item.day}}</span></div>
               <div class="info_temp"><b>{{item.tem1}}</b></div>
               <div class="info_temp"> <b>{{item.tem2}}</b> </div>
               <div class="info_temp"> <b>{{item.week}}</b> </div>
               <div class="info_date"><span>{{item.wea}}</span></div>
            </li
        </ul>
    </div>
  </div>
</div>

<div id="header">
    <p style="text-align: left;font-size: 18px;font-weight: bold;">生活指数</p>
    <div id="foot1">
        <h4 style="text-align: center;"><p v-show="isShow">本地</p></h4>
 <blockquote v-text="" v-show="isShow"> {{suggest}}<br>{{suggest1}}</blockquote>
     </div>
    <div id="foot1">
        <h4 style="text-align: center;">&nbsp;{{city}}&nbsp;</h4>
<blockquote v-text=""> {{yesterday}}</blockquote>
    </div>
</div>
</div>
</body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./main.js"></script>
</html>